<template>
	<view class="app-container">
		<view class="header">
			<view class="avatar">
				<image src="https://v6.site.niucloud.com/static/resource/images/default_headimg.png" mode=""></image>
			</view>
			<view class="flex flex-1 justify-between items-center">
				<view class="pay-status">待支付</view>
				<view class="count-down">剩余时间：00:00:00</view>
			</view>
		</view>
		<view class="main">
			<view class="address flex">
				<image src="../../static/icon/center/group.svg" mode=""></image>
				<view class="info">
					<view style="margin-bottom: 5rpx;">
						<text>李梓健</text>
						<text>15245678910</text>
					</view>
					<view class="">收货地址：广东省-深圳市-龙岗区 坂田街道</view>
				</view>
			</view>
			<view class="goods">
				<view class="goods-item flex">
					<image
						src="http://cgb-mall-yanshi.oss-cn-beijing.aliyuncs.com/upload/1/common/images/20240727/20240727043738172206945890310.png"
						mode=""></image>
					<view class="basic-info flex">
						<view class="name">测试商品</view>
						<view class="count">x1</view>
						<view class="price-info">
							<text class="symbol">￥</text>
							<text class="price">75.55</text>
						</view>
					</view>
				</view>
			</view>
			<view class="order-info">
				<view style="margin-bottom: 30rpx;" class="flex" v-for="(item,index) in orderInfoParams"
					:key="index">
					<view class="label">{{item.label}}：</view>
					<view class="value">{{item.value}}</view>
				</view>
				<view class="service">
					联系客服
				</view>
			</view>
			<view class="order-price">
				<view style="margin-bottom: 30rpx;" class="flex justify-between" v-for="(item,index) in orderPriceParams" :key="index">
					<view class="label">{{item.label}}</view>
					<view :class="['value',index>0?'price':'']">{{item.value}}</view>
				</view>
				<view class="flex justify-end">
					<view style="font-weight: bold;" class="label">实付金额：</view>
					<view class="value price">￥54.04</view>
				</view>
			</view>
		</view>
		<view class="shop">
			<view class="guess">
				———— 猜你喜欢 ————
			</view>
			<view class="goodslist">
				<view class="list" v-for="val in 6" :key="val">
					<image src="https://gd-hbimg.huaban.com/e86b6d1cb6be2b1a8430a82c63208bba2aa6cdafc39e2-hVFO5r_fw658webp"
						mode="aspectFill"></image>
					<view class="container">
						<view class="one-omit">
							测试商品
						</view>
						<view class="price-num">
							<view class="price">
								<text class="min">￥</text>
								<text class="max">157</text>
								<text class="min">.00</text>
							</view>
							<view class="discount">
								￥88.00
							</view>
						</view>
						<view class="action">
							<view class="discount">
								已售4件
							</view>
							<view class="btn-calculate">
								<text>购买</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-footer">
			<view class="btn">关闭订单</view>
			<view class="primary-btn">支付</view>
		</view>
	</view>
</template>

<script setup>
	const orderInfoParams = [{
		label: '订单类型',
		value: '普通订单'
	}, {
		label: '订单编号',
		value: '20241121145581001'
	}, {
		label: '订单交易号',
		value: '20241121145581001'
	}, {
		label: '创建时间',
		value: '2024-11-21 17:00:00'
	}, {
		label: '配送方式',
		value: '物流配送'
	}]
	const orderPriceParams = [{
		label: '商品金额',
		value: '￥75.55'
	}, {
		label: '运费',
		value: '￥0.00'
	}, {
		label: '优惠券',
		value: '-￥20.00'
	}, {
		label: '积分抵扣',
		value: '-￥1.50'
	}]
</script>

<style scoped lang="scss">
	@import 'orderDetails.scss';
</style>